<template>
  <div class="index-navbar">
    <div class="left">
      <li :class="{ 'navi-active': curr == -1 }" @click="curr = -1">
        <router-link to="/index/nalist/66" class="hoverColor">
          <span>热搜 </span>
        </router-link>
      </li>
    </div>
    <div class="texthr"></div>
    <div class="center">
      <ul>
        <li
          class="hoverColor"
          :class="{ 'navi-active': curr == index }"
          @click="curr = index"
          :key="index"
          v-for="(item, index) in list"
        >
          <router-link :to="item.path"
            ><span>{{ item.text }}</span></router-link
          >
        </li>
      </ul>
    </div>
    <div
      class="right"
      :class="{ 'navi-active': curr == -2 }"
      @click="curr = -2"
    >
      <!-- <router-link to="/index/nalist/67" class="hoverColor"
        ><span>全部作品</span></router-link
      > -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      curr: 999,
      list: [
        { text: "产品", path: "/index/navigation/1" },
        { text: "时尚", path: "/index/navigation/2" },
        { text: "风光", path: "/index/navigation/3" },
        { text: "环境/建筑", path: "/index/navigation/4" },
        { text: "人像", path: "/index/navigation/5" },
        { text: "动物", path: "/index/navigation/6" },
        // {text:"内饰",path:""},
        // {text:"性质",path:""},
        // {text:"人",path:""},
        // {text:"街头摄影",path:""},
      ],
    };
  },
};
</script>

<style>
@import url("~@/assets/Index/css/index-navbar.css");

@media (max-width: 767px) {
  .index-navbar > .right {
    display: none;
  }
  .index-navbar > .texthr {
    display: none;
  }
}
.index-navbar > .center {
    flex: 1;
    overflow-y: hidden;
}
</style>